{extend name="defaults/layout"/}
{block name="seo"}
<title>{$info.title}-{$title}</title>	
<meta name="keywords" content="{$info.meta_keywords}-{$keywords}" />
<meta name="description" content="{$info.meta_description}-{$description}" />
{/block}
{block name="content"} 
<div class="banner-page">
</div>

<div id="box">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                {include file="defaults/right" /}
            </div>
            <div class="col-md-9">

        <div class="breadcrumb">
            <span class="breadtitle">{$info.title}</span>
            <span class="breadnav">
            <a class="section" href="{:url('index/index')}"> 首页</a>
            {volist name="crumbs" id="vo"}
            / <a class="section" href="{$vo.url}"> {$vo.title}</a>
            {/volist}
            </span>
            <div class="clearfix"></div>
        </div>

            <ul class="list-pics">
                {volist name="list.data" id="vo"}
                    <li class="col-md-4">
                        <a href="{$vo.url}">
                            <div id="picslistcontainer">
                                {empty name="vo.cover.path"}
                                <img src="__STATIC__/home/defaults/images/errimg.jpg" class="images">
                                {else /}
                                <img src="__UPLOAD__/{$vo.cover.path}" class="images">
                                {/empty}                                
                            </div>
                            <p>{$vo.title}</p>                  
                        </a>
                    </li>
                {/volist}
            </ul>
            {$page|raw}
            <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
//这是一个插件
jQuery.fn.resizeToParent = function(options) {
    var defaults = { parent: 'div'}//接口的默认值
    var options = jQuery.extend(defaults, options);//将默认值与自己写的接口值合并，但是以自主设置的接口为主
    return this.each(function() {//真正的功能从此开始
        var o = options;
        var obj = jQuery(this);//代表$('.image');这是为了避免重复写代码
        obj.load(function() {//意思就是说当图片开始加载时执行下面的操作
            var parentWidth = obj.parents(o.parent).width();//obj选中的是class为image的图片，所以此处是为了获取图片外层的div的宽度
            var parentHeight = obj.parents(o.parent).height();//同理，这里是为了获取图片外层div的高度
            var imageWidth = obj.width();//获取图片的宽度
            var imageHeight = obj.height();//获取图片的高度
            var diff = imageWidth / parentWidth; //得出图片宽度和外层div宽度的比例 diff
            if ((imageHeight / diff) < parentHeight) {//如果图片的高度按diff的比例计算出的高度小于外层div的高度，通过网页可以发现，图片的显示，第一张是宽度全部显示，因为，如果高度完全显示的话，左右会有留白。第二张是高度全部显示，如果宽度完全显示则上下会有留白。
                obj.css({'width': 'auto', 'height': parentHeight});//则图片的高度设置为外层div的高度，宽度则按比例缩放，以保证图片不变形
                imageWidth = imageWidth / (imageHeight / parentHeight);//计算出图片缩放以后的宽度，这是为了下面显示图片中心的内容，他可能认为，图片的主题一般会放在中心，这样就不会隐藏主题
                imageHeight = parentHeight;//计算出图片缩放以后的高度
            }else{//其他情况同理
                obj.css({'height': 'auto', 'width': parentWidth});
                imageWidth = parentWidth;
                imageHeight = imageHeight / diff;
            }
            var leftOffset = (imageWidth - parentWidth) / -2;//计算出图片的left坐标
            var topOffset = (imageHeight - parentHeight) / -2;//计算出图片的top坐标
            obj.css({'left': leftOffset, 'top': topOffset});//实现图片居中显示
        });
        if (this.complete) {//这里是防止图片加载速度慢，图片没有加载过来则无法获得img标签的宽度和高度，这里是循环，直到图片加载完成则停止循环
            obj.trigger('load');
        }
    });
}
//插件结束
$(function() {
    //调用插件，实现效果
  $('.image').resizeToParent();
});
</script>
{/block}